<template>
  <div class="quick-access-menu">
    <!-- 主按钮 -->
    <div 
      class="quick-access-trigger"
      :class="{ active: isMenuOpen }"
      @click="toggleMenu"
    >
      <el-icon><component :is="isMenuOpen ? 'Close' : 'Plus'" /></el-icon>
    </div>

    <!-- 快速访问项 -->
    <transition-group name="quick-item" tag="div" class="quick-access-items">
      <div 
        v-for="(item, index) in filteredQuickItems" 
        :key="item.key"
        v-show="isMenuOpen"
        class="quick-access-item"
        :style="getItemStyle(index)"
        @click="handleItemClick(item)"
      >
        <el-tooltip :content="item.label" placement="left">
          <div class="item-content">
            <el-icon><component :is="item.icon" /></el-icon>
            <span v-if="item.badge" class="item-badge">{{ item.badge }}</span>
          </div>
        </el-tooltip>
      </div>
    </transition-group>

    <!-- 背景遮罩 -->
    <div 
      v-show="isMenuOpen" 
      class="menu-backdrop"
      @click="closeMenu"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Plus,
  Close,
  User,
  Wallet,
  Setting,
  Reading,
  Star,
  Search,
  House,
  Bell,
  Message,
  DataAnalysis
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

// Stores & Router
const userStore = useUserStore()
const router = useRouter()

// 响应式数据
const isMenuOpen = ref(false)

// 快速访问项配置
const quickItems = computed(() => {
  const items = [
    {
      key: 'home',
      label: '首页',
      icon: House,
      path: '/',
      requiresAuth: false
    },
    {
      key: 'search',
      label: '搜索',
      icon: Search,
      action: 'search',
      requiresAuth: false
    },
    {
      key: 'bookshelf',
      label: '书架',
      icon: Reading,
      path: '/bookshelf',
      requiresAuth: true
    },
    {
      key: 'ranking',
      label: '排行榜',
      icon: Star,
      path: '/ranking',
      requiresAuth: false
    }
  ]

  // 如果用户已登录，添加用户相关功能
  if (userStore.isLoggedIn && userStore.user) {
    items.push(
      {
        key: 'profile',
        label: '个人中心',
        icon: User,
        path: '/profile',
        requiresAuth: true
      },
      {
        key: 'wallet',
        label: '我的钱包',
        icon: Wallet,
        path: '/wallet',
        requiresAuth: true,
        badge: userStore.user.balance > 0 ? '￥' : undefined
      },
      {
        key: 'notifications',
        label: '消息通知',
        icon: Bell,
        action: 'notifications',
        requiresAuth: true,
        badge: '3' // 示例通知数量
      }
    )

    // 如果是管理员，添加管理功能
    if (userStore.isAdmin) {
      items.push(
        {
          key: 'admin',
          label: '管理中心',
          icon: Setting,
          path: '/admin/users',
          requiresAuth: true
        },
        {
          key: 'analytics',
          label: '数据分析',
          icon: DataAnalysis,
          action: 'analytics',
          requiresAuth: true
        }
      )
    }
  }

  return items
})

// 过滤快速访问项
const filteredQuickItems = computed(() => {
  return quickItems.value.filter(item => {
    if (item.requiresAuth && !userStore.isLoggedIn) {
      return false
    }
    return true
  })
})

// 方法
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const closeMenu = () => {
  isMenuOpen.value = false
}

const getItemStyle = (index: number) => {
  const angle = (index * 45) - 90 // 从顶部开始，每个项目间隔45度
  const radius = 80 // 距离中心的距离
  const x = Math.cos(angle * Math.PI / 180) * radius
  const y = Math.sin(angle * Math.PI / 180) * radius
  
  return {
    transform: `translate(${x}px, ${y}px)`,
    transitionDelay: `${index * 50}ms`
  }
}

const handleItemClick = async (item: any) => {
  closeMenu()

  try {
    if (item.path) {
      await router.push(item.path)
    } else if (item.action) {
      handleAction(item.action)
    }
  } catch (error) {
    console.error('Navigation failed:', error)
    ElMessage.error('页面跳转失败')
  }
}

const handleAction = (action: string) => {
  switch (action) {
    case 'search':
      // 触发全局搜索
      window.dispatchEvent(new CustomEvent('open-search'))
      break
    case 'notifications':
      ElMessage.info('通知功能开发中...')
      break
    case 'analytics':
      ElMessage.info('数据分析功能开发中...')
      break
    default:
      console.warn('Unknown action:', action)
  }
}

// 键盘快捷键
const handleKeydown = (event: KeyboardEvent) => {
  // 按ESC关闭菜单
  if (event.key === 'Escape' && isMenuOpen.value) {
    closeMenu()
  }
  // 按Ctrl+Space切换菜单
  if (event.ctrlKey && event.code === 'Space') {
    event.preventDefault()
    toggleMenu()
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style lang="scss" scoped>
.quick-access-menu {
  position: fixed;
  bottom: 80px; // 在底部导航栏上方
  right: 20px;
  z-index: 1000;

  @media (min-width: 769px) {
    bottom: 30px; // 桌面端位置
  }
}

.quick-access-trigger {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 1001;

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
  }

  &.active {
    transform: rotate(135deg);
    background: linear-gradient(135deg, var(--danger-color), #ff6b6b);
  }

  .el-icon {
    font-size: 24px;
    color: white;
    transition: all 0.3s ease;
  }
}

.quick-access-items {
  position: absolute;
  bottom: 0;
  right: 0;
}

.quick-access-item {
  position: absolute;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }

  .item-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-icon {
      font-size: 20px;
      color: var(--text-primary);
    }

    .item-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--danger-color);
      color: white;
      font-size: 10px;
      padding: 2px 4px;
      border-radius: 8px;
      min-width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }
  }
}

.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  backdrop-filter: blur(2px);
}

/* 动画效果 */
.quick-item-enter-active,
.quick-item-leave-active {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-item-enter-from {
  opacity: 0;
  transform: scale(0.3) translate(0, 0) !important;
}

.quick-item-leave-to {
  opacity: 0;
  transform: scale(0.3) translate(0, 0) !important;
}

/* 深色模式适配 */
.dark {
  .quick-access-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .quick-access-menu {
    bottom: 100px; // 为移动端底部导航留出更多空间
  }

  .quick-access-trigger {
    width: 52px;
    height: 52px;

    .el-icon {
      font-size: 22px;
    }
  }

  .quick-access-item {
    width: 44px;
    height: 44px;
    bottom: 26px;
    right: 26px;

    .item-content .el-icon {
      font-size: 18px;
    }
  }
}

/* 无障碍支持 */
.quick-access-trigger:focus,
.quick-access-item:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 脉冲动画提示 */
@keyframes pulse {
  0% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 0 var(--primary-color);
  }
  70% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 0 transparent;
  }
}

.quick-access-trigger.pulse {
  animation: pulse 2s infinite;
}
</style> 